<template>
  <div class="product-detail">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>网上营业厅</el-breadcrumb-item>
      <el-breadcrumb-item>买手机</el-breadcrumb-item>
      <el-breadcrumb-item>{{ product.spuName }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="product-content">
      <div class="product-image">
        <el-carousel :interval="4000" height="500px">
          <el-carousel-item class="carousel-item" v-for="(img, index) in images" :key="index">
            <img :src="require(`@/${img}`)" class="slide-image" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="product-info">
        <h1>{{ product.spuName }}</h1>
        <p class="price">￥{{ product.skuPrice }}</p>
        <p>库存：{{ product.skuStore }}</p>
        <p>配送范围：全国 (港澳台地区除外)</p>
        <p>发货地：{{ product.province }} {{ product.place }}</p>

        <el-form>
          <el-form-item label="选择颜色">
            <el-radio-group v-model="selectedColor">
              <el-radio
                v-for="product in productList"
                :key="product.color"
                :label="product.color"
                @change="changePhone"
              >{{ product.color }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="购买数量">
            <el-input-number v-model="quantity" :min="1" :max="product.skuStore"></el-input-number>
          </el-form-item>

          <div class="button-group">
            <el-button type="warning" @click="addCart" :disabled="isOutOfStock">加入购物车</el-button>
          </div>
        </el-form>
      </div>
    </div>

    <el-tabs>
      <el-tab-pane label="商品介绍" name="1">{{ product.skuDescribe }}</el-tab-pane>
      <el-tab-pane label="商品评价" name="3">商品好评度:{{ product.comment }}</el-tab-pane>
      <el-tab-pane label="常见问题" name="4">常见问题内容</el-tab-pane>
      <el-tab-pane label="配送及售后" name="5">配送及售后内容</el-tab-pane>
    </el-tabs>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      spuId: "",
      productList: [],
      product: "",
      quantity: "",
      images: [], // 用于存储所有商品图片
      selectedColor: "",
      phone: "",
      user: {}
    };
  },
  methods: {
    querySku() {
      let param = new URLSearchParams();
      param.append("spuId", this.spuId);
      this.$axios.post("/api/zgyd-product/querySku", param).then(res => {
        if (res.data.code === 200) {
          this.productList = res.data.data;
          this.product = this.productList[0];
          this.selectedColor = this.product.color; // 将默认的颜色设为第一个产品的颜色
          // 获取所有商品的图片
          this.images = this.getProductImages();
        }
      });
    },
    //获取所有商品图片
    getProductImages() {
      let images = [];
      this.productList.forEach(product => {
        images.push(product.img); // 假设每个商品的 img 属性是其图片的 URL
      });
      return images;
    },
    changePhone() {
      this.product = this.productList.find(
        product => product.color === this.selectedColor
      );
    },
    addCart() {
      let cart = {};
      cart.buyNum = this.quantity;
      cart.buyPrice = this.product.skuPrice;
      cart.totalPrice = (this.quantity * this.product.skuPrice).toFixed(2);
      cart.userId = this.user.id;
      cart.skuId = this.product.id;
      cart.skuName = this.product.spuName
      this.$axios.post("/api/zgyd-product/addCart", cart).then(res => {
        if (res.data.code === 200) {
          this.$message.success("添加购物车成功!");
          this.$router.push({ path: "/product" });
        } else {
          this.$message.error("添加失败")
        }
      });
    },
    queryUser() {
      let param = new URLSearchParams();
      param.append("phone", this.phone);
      this.$axios.post("/api/zgyd-user/queryUser", param).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.data;
        }
      });
    },
  },
  created() {
    this.spuId = this.$route.query.spuId;
    this.phone = localStorage.getItem("username");
    this.querySku();
    this.queryUser();
  },
  watch: {},
  computed: {
    // 在组件的computed属性中添加isOutOfStock方法
    isOutOfStock: function() {
      return this.product.skuStore === 0;
    }
  }
};
</script>
  
<style scoped>
.product-detail {
  padding: 40px;
  max-width: 1200px;
  margin: auto;
  background-color: #f5f5f5;
}

.product-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #ffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 20px;
}

.product-image {
  flex: 1;
  margin-right: 20px;
  margin-top: 20px;
}

.product-info {
  padding: 20px;
}

.product-info h1 {
  margin-bottom: 20px;
  font-size: 28px;
  color: #333;
}

.product-info .price {
  font-size: 24px;
  color: #e93b3d;
  margin-bottom: 20px;
  font-weight: bold;
}

.el-form-item {
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.el-button {
  width: 150px;
}

.el-tabs {
  padding: 30px;
  background: #fff;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.slide-image {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

.carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px; /* 或者你设定的任何高度 */
}

.product-info h1 {
  font-size: 24px;
  margin-bottom: 20px;
  margin-top: 30px; /* 添加顶部间隔 */
}

/* 为 p 标签增加全局样式 */
.product-info p {
  margin-bottom: 20px;
}

.el-breadcrumb {
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
</style>
  